<template>
  <div class="search">
    <div class="head flexb">
      <!-- 兑换记录 -->
      <div v-if="type === 1">
        {{ $t('swap.s24') }}
      </div>
      <!-- 存取记录 -->
      <div v-else>
        {{ $t('swap.s33') }}
      </div>
      <div class="main">
        <div class="search flex">
          <!-- 支付币种 -->
          <span class="item" v-if="type === 1">
            <span class="label">{{ $t('swap.s3') }}</span>
            <span class="inputCont">
              <!-- 交易对 -->
              <el-input
                :placeholder="$t('swap.s80')"
                v-model="dataMarket.fromCoin"
                clearable
                style="width: 150px;"
                ref="historyInput"
                slot="reference"
                class="coinInput"
                @clear="handleInitSearch('fromCoin')"
                @keyup.native="handleShowCodeList('fromCoin')"
                size="small"
                >
              </el-input>
              <div class="historyListCont">
                <ul class="historyList codeList" v-if="selectPay">
                  <li
                    v-for="(item, index) in selectPayList"
                    :key="index"
                    @click="handleSelectCodeList(item, 'fromCoin')"
                    style="font-size: 12px;">
                    {{ item.symbol1 }}
                  </li>
                </ul>
              </div>
            </span>
          </span>
          <!-- 得到币种 -->
          <span class="item" v-if="type === 1" >
            <span class="label">{{ $t('swap.s5') }}</span>
            <span class="inputCont">
              <!-- 交易对 -->
              <el-input
                :placeholder="$t('swap.s80')"
                v-model="dataMarket.toCoin"
                clearable
                style="width: 150px;"
                ref="historyInput"
                slot="reference"
                class="coinInput"
                @clear="handleInitSearch('toCoin')"
                @keyup.native="handleShowCodeList('toCoin')"
                size="small"
                >
              </el-input>
              <div class="historyListCont">
                <ul class="historyList codeList" v-if="selectGet">
                  <li
                    v-for="(item, index) in selectGetList"
                    :key="index"
                    @click="handleSelectCodeList(item, 'toCoin')"
                    style="font-size: 12px;">
                    {{ item.symbol1 }}
                  </li>
                </ul>
              </div>
            </span>
          </span>
          <!-- 交易对 -->
          <span class="item" v-if="type === 2">
            <span class="label">{{ $t('swap.s37') }}</span>
            <span class="inputCont">
              <!-- 交易对 -->
              <el-input
                :placeholder="$t('swap.s71')"
                v-model="dataMarket.coinCode"
                clearable
                style="width: 150px;"
                ref="historyInput"
                slot="reference"
                class="coinInput"
                @clear="handleInitSearch('coin')"
                @keyup.native="handleShowCodeList('coin')"
                size="small"
                >
              </el-input>
              <div class="historyListCont">
                <ul class="historyList codeList" v-if="select">
                  <li
                    v-for="(item, index) in selectList"
                    :key="index"
                    @click="handleSelectCodeList(item, 'coin')"
                    style="font-size: 12px;">
                    {{ item.symbolFormat }}
                  </li>
                </ul>
              </div>
            </span>
          </span>
          <!-- 存/取 -->
          <div class="item flex" v-if="type === 2">
            <span class="label">
              {{ $t('swap.s38') }}
            </span>
            <el-select v-model="dataMarket.type"
            :placeholder="$t('swap.s72')"
            class="selectWidth"
            size="small">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="$t(`swap.${item.label}`)"
                :value="item.value"
                style="font-size: 12px;">
              </el-option>
            </el-select>
          </div>
          <!-- 时间 -->
          <div class="item flex">
            <span class="label">
              {{ $t('swap.s28') }}
            </span>
            <el-select v-model="dataMarket.queryMonths"
            :placeholder="$t('order.inputChoose')"
            class="selectWidth"
            size="small">
              <el-option
                v-for="item in timeList"
                :key="item.value"
                :label="$t(`swap.${item.label}`)"
                :value="item.value"
                style="font-size: 12px;">
              </el-option>
            </el-select>
          </div>
          <!-- 筛选 -->
          <div class="item comfirmBtn" @click="handleChange">
            {{ $t('swap.s73') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/utils/bus';

export default {
  name: 'search', // 搜索框
  data() {
    return {
      dataMarket: {
        activeType: 1,
        coinCode: '', // 模糊查询
        pairId: '', // 交易对ID
        type: '', // 类型：1-存币；2-取币
        queryMonths: '', // 查询时间：1-近一个月；3-近三个月
        fromCoin: '', // 支付币种
        toCoin: '', // 得到币种
      },
      timeList: [
        {
          value: '',
          label: 's44'
        },
        {
          value: 1,
          label: 's29', // 近1个月
        },
        {
          value: 3,
          label: 's30', // 近3个月
        },
      ],
      typeList: [
        {
          value: '',
          label: 's44'
        },
        {
          value: 1,
          label: 's39', // 近1个月
        },
        {
          value: 2,
          label: 's23', // 近3个月
        },
      ],
      selectPayList: [], // 支付币种下拉列表数据
      selectGetList: [], // 得到币种下拉列表数据
      selectList: [], // 交易对下拉列表数据
      selectPay: false, // 支付币种下拉列表隐藏值
      selectGet: false, // 得到币种下拉列表隐藏值
      select: false, // 交易对下拉列表隐藏值
    }
  },
  components: {},
  props: {
    dataList: Array,
    type: Number, // 1-兑换记录 2-做市记录
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.handleChange();
    this.handleOnChange();
  },
  beforeDestroy() {
    Bus.$off('handleChange');
  },
  methods: {
    // 监听订单完成筛选
    handleOnChange() {
      Bus.$on('handleChange', (val) => {
        this.dataMarket = val;
      })
    },
    // 筛选
    handleChange() {
      this.handleBlur();
      this.dataMarket.activeType = this.type;
      if (this.dataMarket.coinCode === '') {
        this.dataMarket.pairId = '';
      }
      Bus.$emit('handleChange', this.dataMarket);
    },
    // 显示币种列表
    handleShowCodeList(type) {
      if (type === 'coin') {
        this.selectList = this.dataList.filter(v => v.symbolFormat.indexOf(this.dataMarket.coinCode.toUpperCase()) > -1);
        if (!this.selectList.length) {
          this.select = false;
        } else {
          this.select = true;
        }
      }

      if (type === 'fromCoin') {
        this.selectPayList = this.dataList.filter(v => v.symbol1.indexOf(this.dataMarket.fromCoin.toUpperCase()) > -1);
        if (!this.selectPayList.length) {
          this.selectPay = false;
        } else {
          this.selectPay = true;
        }
      }

      if (type === 'toCoin') {
        this.selectGetList = this.dataList.filter(v => v.symbol1.indexOf(this.dataMarket.toCoin.toUpperCase()) > -1);
        if (!this.selectGetList.length) {
          this.selectGet = false;
        } else {
          this.selectGet = true;
        }
      }
    },
    // 选择币种列表
    handleSelectCodeList(item, type) {
      if (type === 'coin') {
        this.dataMarket.coinCode = item.symbolFormat;
        this.dataMarket.pairId = item.id;
        this.select = false;
      }

      if (type === 'fromCoin') {
        this.dataMarket.fromCoin = item.symbol1;
        this.selectPay = false;
      }

      if (type === 'toCoin') {
        this.dataMarket.toCoin = item.symbol1;
        this.selectGet = false;
      }
    },
    // 重置搜索
    handleInitSearch(type) {
      if (type === 'coin') {
        this.dataMarket.coinCode = '';
        this.dataMarket.pairId = '';
        this.select = false;
      }
      if (type === 'fromCoin') {
        this.dataMarket.fromCoin = '';
        this.selectPay = false;
      }
      if (type === 'toCoin') {
        this.dataMarket.toCoin = '';
        this.selectGet = false;
      }
    },
    handleBlur() {
      this.select = false;
      this.selectPay = false;
      this.selectGet = false;
    }
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.search {
  .head {
    padding: 10px 20px;
    border-bottom: 1px solid #D7D7D7;
  }

  .main {
    .search {
      .item {
        margin-right: 25px;

        .label {
          margin-right: 8px;
          font-size: 12px;
          color: #999;
        }

        .el-input {
          width: 150px;
        }

        /deep/ .el-input__inner {
          height: 30px;
          line-height: 30px;
        }

        .selectWidth {
          width: 150px;
        }

        &.comfirmBtn {
          border: 1px solid #4A90E2;
          border-radius: 3px;
          padding: 5px 20px;
          color: #4A90E2;
          margin-right: 0 !important;
          cursor: pointer;
          font-size: 12px;
        }
      }
    }
  }
  .inputCont {
    position: relative;
    .historyListCont {
      position: absolute;
      left: 20px;
      top: 40px;
      z-index: 100;
      .historyList {
        background: #fff;
        border-radius: 0 0 5px 5px;
        box-shadow: 0px 0px 7px rgba(74, 144, 226, 0.31);
        // box-shadow: #999;
        &::before {
          position: absolute;
          top: -12px;
          left: 40%;
          content: '';
          width: 0;
          height: 0;
          border-width: 0 10px 10px;
          border-style: solid;
          border-color: transparent transparent #f3f3f3;
        }

        li {
          width: 100%;
          line-height: 34px;
          font-size: 14px;
          color: #666;
          padding: 0 20px;
          cursor: pointer;
          // overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
    }
  }
}

.theme-1B1D27 {
  .head {
    background: $-black2 !important;
    border-color: $-black2 !important;
  }

  .historyList {
    background: $-black1 !important;

    li {
      color: #fff !important;

      &:hover {
        background-color: $-black2 !important;
      }
    }

    &::before {
      border-color: transparent transparent $-black1 !important;
    }
  }
}
</style>
